<template>
  <div id="IndexWS">
    <div class="head-icon"></div>
    <div class="w1190 jrjlb-home">
      <div class="jrjlb-home-auditorium">
        <ul>
          <li>
            <img width="100%" src="../assets/imgs/logo.png">
          </li>
        </ul>
      </div>
      <!-- 旋转 -->
      <div class="b203">
        <div class="c221">
            <img src="../assets/imgs/imgdh/1.jpg" id="img1"/>
            <img src="../assets/imgs/imgdh/2.jpg" id="img2"/>
            <img src="../assets/imgs/imgdh/3.jpg" id="img3"/>
            <img src="../assets/imgs/imgdh/4.jpg" id="img4"/>
            <img src="../assets/imgs/imgdh/5.jpg" id="img5"/>
            <img src="../assets/imgs/imgdh/6.jpg" id="img6"/>
            <img src="../assets/imgs/imgdh/7.jpg" id="img7"/>
            <img src="../assets/imgs/imgdh/8.jpg" id="img8"/>
          </div>
      </div>
      <!-- 轮播 -->
      <div id="outer">
        <div class="c211" id="tu">
          <img src="../assets/imgs/imgdh/h01.jpg"/>
          <img src="../assets/imgs/imgdh/h02.jpg"/>
          <img src="../assets/imgs/imgdh/h03.jpg"/>
          <img src="../assets/imgs/imgdh/h04.jpg"/>
          <img src="../assets/imgs/imgdh/h01.jpg"/>
        </div>
      </div>
      <!-- 魔方 -->
      <div class="b204">
        <div class="c241">
          <div id="d1"></div>
          <div id="d2"></div>
          <div id="d3"></div>
          <div id="d4"></div>
          <div id="d5"></div>
          <div id="d6"></div>
        </div>
        <div class="one">
          <h1 @click="one()">鼠标放置旋转魔方</h1>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
export default {
  name: 'IndexWS',
  data () {
    return {
      dataList: [],
    }
  },
  mounted() {
  },
  methods: {
    one(){
      var t1=document.getElementsByClassName("one");
      t1.style.fontSize=36+"px";
      t1.tyle.color="blue";
      t1.style.fontFamily="华文彩云";
    }
  }
}
</script>
<style scoped="scoped">
  
#IndexWS{
  background: #F6F6F6;
}
.w1190{
  width: 1190px;
  margin: 0 auto;
}
.jrjlb-home{
  padding: 40px 0 24px 0;
}

.jrjlb-home-auditorium ul li{
  padding: 30px;
  margin-bottom: 50px;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  background: #FFFFFF;
}

/*旋转*/
@keyframes scroll{
	0%{transform:rotateX(-2deg)rotateY(0deg);}	
	100%{transform:rotateX(-2deg)rotateY(360deg);}
}
.c221{
	height:220px;
	width:640px;
	margin:100px auto;
	position:relative;
	transform-style:preserve-3d;
	animation:scroll 15s linear 0s infinite;}
.c221>img{
	display:block;
	width:240px;
	height:160px;
	position:absolute;
	top:30px;
	left:200px;}
#img8{transform:rotateY(0deg) translateZ(400px);}
#img7{transform:rotateY(45deg) translateZ(400px);}
#img6{transform:rotateY(90deg) translateZ(400px);}
#img5{transform:rotateY(135deg) translateZ(400px);}
#img4{transform:rotateY(180deg) translateZ(400px);}
#img3{transform:rotateY(225deg) translateZ(400px);}
#img2{transform:rotateY(270deg) translateZ(400px);}
#img1{transform:rotateY(315deg) translateZ(400px);}

/*横换*/
#outer{
	width:1010px;
	height:330px;
	border:5px solid gray;
	margin:0px auto;
	position:relative;
	overflow:hidden;
	padding:10px;
	margin:50px auto;}
#tu{
	width:2550px;
	height:330px;
	animation:move 16s linear 0s infinite;}
.c211>img{	
	float:left;
	width:500px;
	height:330px;
	margin-right:10px;}
@keyframes move{
	0%{transform:translate(0px);}
	18%{transform:translate(0px);}
	25%{transform:translate(-510px);}
	43%{transform:translate(-510px);}
	50%{transform:translate(-1020px);}
	68%{transform:translate(-1020px);}
	75%{transform:translate(-1530px);}
	93%{transform:translate(-1530px);}
	100%{transform:translate(-2040px);}
}

/*立方体*/
.c241{
	width:500px;
	height:500px;
	margin:100px auto;
	position:relative;
	transform:rotate3D(2,5,3,30deg);
	transition:all 2s linear 0s;
	transform-style:preserve-3d;
	perspective:5000px;}
.c241:hover{transform:rotate3D(2,5,3,390deg);}
.c241>div{
	width:300px;
	height:300px;
	position:absolute;
	top:100px;
	left:100px;}
#d1{
	transform:rotateX(270deg)translateZ(150px);
	background:#aabbcc;
	background-size:300px 300px;}
#d2{
	transform:rotateX(180deg)translateZ(150px);
	background:#aaccbb;
	background-size:300px 300px;}
#d3{
	transform:rotateX(90deg)translateZ(150px);
	background:#bbaacc;
	background-size:300px 300px;}
#d4{
	transform:rotateX(0deg)translateZ(150px);
	background:#bbccaa;
	background-size:300px 300px;}
#d5{
	transform:rotateY(90deg)translateZ(150px);
	background:#ccaabb;
	background-size:300px 300px;}
#d6{
	transform:rotateY(-90deg)translateZ(150px);
	background:#ccbbaa;
  background-size:300px 300px;}
  .one{
    text-align: center;
  }
  
</style>
